<template>
  <div>
    <a-form :form="form">
      <a-row :gutter="20">
        <a-col :md="12" :sm="24">
          <a-form-item
            label="单位"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <unit-tree @getUnit="onChange"></unit-tree>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="姓名"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
          >
            <a-select
              v-model="personName"
              placeholder="Select a person"
              dropdown-class-name="value-select"
              show-search
              :filter-option="filterOption"
              allow-clear
              @change="changeMeta"
            >
              <a-select-option v-for="item in meteData" :value="item.c" :label="item.a" :key="item.c">
                <span class="select-left">{{ item.a }}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio' }"
      :columns="columns"
      :data-source="data"
      :scroll="{ y: 240 }"
      :pagination="false"
    >
      <span slot="unitId" slot-scope="text">
        <a-tag color="#108ee9">{{ text | unitTextFilter }}</a-tag>
      </span>
    </a-table>
  </div>
</template>

<script>
import { queryPerson } from '@/api/basic/soldier'
import UnitTree from '@/components/PersonSelect/UnitTree'
import { listUnit } from '@/api/basic/unit'

let that

export default {
  name: 'PersonSelect',
  components: {
    UnitTree
  },
  data () {
    return {
      meteData: [],
      personName: '',
      selectedRowKeys: [],
      data: [],
      value: undefined,
      personId: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      // 表头
      columns: [
        {
          title: '证件号',
          dataIndex: 'personCard',
          align: 'center',
          width: 130
        },
        {
          title: '人员姓名',
          dataIndex: 'personName',
          align: 'center'
        },
        {
          title: '单位',
          dataIndex: 'unitId',
          scopedSlots: { customRender: 'unitId' },
          align: 'center',
          sorter: true
        },
        {
          title: '军衔',
          dataIndex: 'personMilitaryRank',
          align: 'center'
        }
      ],
      form: this.$form.createForm(this)
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  filters: {
    unitTextFilter (unitId) {
      let unitName = ''
      for (const unit of that.units) {
        if (parseInt(unit.unitId) === parseInt(unitId)) {
          unitName = unit.unitName
          break
        }
      }
      return unitName
    }
  },
  beforeCreate () {
    that = this
  },
  created () {
    listUnit()
      .then(res => {
        if (res.message !== 'error') {
          this.units = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    changeMeta (value) {
      this.personId = value
      queryPerson({ 'unitId': this.value, 'manoeuvreId': this.manoeuvreId, 'personId': this.personId }).then(res => {
        if (res.message !== 'error') {
          this.data = res.result
        } else {
          this.$message.error('操作失败! ')
        }
      })
      console.log(`selected ${value}`)
    },
    filterOption (input, option) {
      return option.componentOptions.propsData.label.indexOf(input) > -1
    },
    onChange (value) {
      this.value = value
      this.meteData = []
      queryPerson({ 'unitId': value }).then(res => {
        if (res.message !== 'error') {
          this.data = res.result
          if (this.data != null && this.data.length > 0) {
            for (let i = 0; i < this.data.length; i++) {
              this.meteData.push({ a: this.data[i].personName, c: this.data[i].personId })
            }
          }
        } else {
          this.$message.error('操作失败! ')
        }
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.personId = selectedRowKeys[0]
      let person = {}
      for (const i in this.data) {
        if (this.data[i].personId === this.personId) {
          person = this.data[i]
          break
        }
      }
      console.log(person)
      this.$emit('getPerson', person)
    }
  }
}
</script>
